<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
		
			div{
				border: 2px solid green;
				height: auto;
				width:  auto;
			}
			
			span{
				margin: 5px;
				color: white;
				background-color: green;
				/*border: 2px solid orchid;*/
				
				/*工作很常用*/
				display: inline-block;
				width: 100px;
				height: 100px;
				line-height: 100px;
				font-family: "微软雅黑";
				font-weight: bold;
				text-align: center;
				
			}
			
			.red{
				width: 200px;
				background-color: red;
				
			}
			
		</style>
	</head>
	<body>
		<div id="div007">
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<!--<span>10086</span>-->
		</div>
	</body>
	
	<script type="text/javascript" src="../../../js/jquery-1.7.2.js" ></script>
	
	<script>
		//在div的内部的开始处插入10086  
		
		
		$(function(){
			
			//1生成标签<span class="red" yyr="20161116">10086</span>
			var span = $('<span></span>');
			
			//设置属性   第1个参数 属性的名称    第2个参数属性的值
			span.attr("yyr","20161116");
			span.attr("class","red");
			span.text("外部-前面-被动式");
			
			
			
			//2找到div
			var div007 = $('#div007');
			
			//3在div的内部的开始处插入10086  
			//div007.before(span);
			span.insertBefore(div007);
		});
		
		
		
	</script>
</html>
